<template>
  <div class="FireCont">
    <statistics-fire v-if="staticActive"></statistics-fire>
    <double-comparison class="double" v-if="statusCom === '双屏对比'"  @handleDestry="handleDestryChange"></double-comparison>
    <roller-comparison class="roller" v-if="statusCom === '卷帘对比'"></roller-comparison>

    <!-- 搜索按钮、对比分析、列表折叠控件 -->
    <div class="controlCont">
      <div
        :class="['controlSearch',searchActive?'controlSearch-active':'']"
        @click="searchActive = !searchActive"
      ></div>
      <div
        :class="['controlCompara',comparaActive?'controlCompara-active':'']"
        @click="handleCompara"
      ></div>

      <div
        :class="['controlStatic',staticActive?'controlStatic-active':'']"
        @click="staticActive = !staticActive"
      ></div>
    </div>

    <!-- 搜索区域 -->
    <div class="searchArea" v-if="searchActive">
      <input type="text" class="inputLable" placeholder="请输入火区名称" v-model="fireName" />
      <div class="searchWord">
        <div class="getButton" @click="getData">搜索</div>
        <div class="restButton" @click="resetData"></div>
      </div>
    </div>

    <!-- 对比分析 -->
    <div class="select-wrapper" v-if="flagActive">
      <div
        class="select-item"
        v-for="item in descList"
        :key="item"
        @click="handleSelect(item)"
      >{{ item }}</div>
    </div>

    <!-- 图例显示 -->
    <div class="map-legend"></div>
    <!-- 指北针显示 -->
    <div class="map-compass"></div>
  </div>
</template>

<script>
import StatisticsFire from "../Statistics/StatisticsFire.vue";
import DoubleComparison from "../FireManagement/comparison/DoubleComparison.vue";
import RollerComparison from "../FireManagement/comparison/RollerComparison.vue";

import { FireByName } from "../../../../api/gis/layer";

import { Style, Icon } from "ol/style";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { FireArea } from "../../../../api/gis/layer";

import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import { Message } from "element-ui";

export default {
  props: {
    FireMap: Object
  },
  components: {
    StatisticsFire,
    DoubleComparison,
    RollerComparison
  },
  data() {
    return {
      searchActive: false,
      comparaActive: false,
      staticActive: true,
      fireName: "",
      statusCom: "",
      flagActive: false,
      descList: ["双屏对比", "卷帘对比"]
    };
  },
  mounted() {
    this.handleDrawFireLayer();
  },
  beforeDestroy() {
    this.dispose();
  },
  methods: {
    handleDestryChange(){
      this.$emit("StatusComStatus", "");
    },
    handleSelect(item) {
      this.statusCom = item;
      this.flagActive = false;
      this.comparaActive = false;
      this.$emit("StatusComStatus", item);
    },
    handleCompara() {
      this.comparaActive = !this.comparaActive;
      if (this.comparaActive) {
        this.flagActive = true;
      } else {
        this.flagActive = false;
      }
    },
    getData() {
      FireByName({ fireName: this.fireName }).then(res => {
        if (res.code === 200 && res.data.rows.length == 1) {
          this.$emit("FireZoomTo", res.data.rows[0]);
        } else {
          Message({
            message: "未查询到" + this.fireName + "火区数据!",
            type: "error"
          });
          console.log("未查询到" + this.fireName + "火区数据!");
        }
      });
    },
    resetData() {
      this.fireName = "";
      this.$emit("FireBackTo");
    },

    dispose() {
      const firelayer = this.findLayerById("firelayer");
      this.FireMap.removeLayer(firelayer);
    },
    findLayerById(id) {
      const layers = this.FireMap.getLayers();
      let res;
      layers.array_.forEach(layer => {
        if (layer.values_.id && layer.values_.id === id) {
          res = layer;
        }
      });
      return res;
    },
    handleDrawFireLayer() {
      FireArea().then(res => {
        if (res.code === 200) {
          const features = [];
          res.data.rows.forEach(item => {
            const feature = new Feature({
              geometry: new Point([item.longitude, item.latitude])
            });
            feature.set("props", item);
            features.push(feature);
          });
          const styleGoverned = new Style({
            image: new Icon({
              anchorXUnits: "fraction",
              anchorYUnits: "fraction",
              src: require("../../../../assets/img/OneMap/已治理火区.png")
            })
          });
          const styleUndergoverned = new Style({
            image: new Icon({
              anchorXUnits: "fraction",
              anchorYUnits: "fraction",
              src: require("../../../../assets/img/OneMap/治理中火区.png")
            })
          });
          const styleUngoverned = new Style({
            image: new Icon({
              anchorXUnits: "fraction",
              anchorYUnits: "fraction",
              src: require("../../../../assets/img/OneMap/未治理火区.png")
            })
          });
          features.forEach(item => {
            if (item.values_.props.ifGovernance === 1) {
              item.setStyle(styleGoverned);
            } else if (item.values_.props.ifGovernance === 2) {
              item.setStyle(styleUndergoverned);
            } else if (item.values_.props.ifGovernance === 3) {
              item.setStyle(styleUngoverned);
            }
          });
          const source = new VectorSource({
            features
          });
          const layer = new VectorLayer({
            source: source
          });
          layer.set("id", "firelayer");
          this.FireMap.addLayer(layer);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.FireCont {
  width: 100%;
  height: 100%;
  .controlCont {
    position: absolute;
    top: 100px;
    right: 70px;
    width: 196px;
    height: 52px;
    display: flex;
    direction: row;
    justify-content: space-between;
    .controlSearch {
      width: 52px;
      height: 52px;

      background: url("../../../../assets/img/Home/搜索1.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .controlSearch-active {
      background: url("../../../../assets/img/Home/搜索2.png") no-repeat;
      background-size: 100% 100%;
    }
    .controlCompara {
      width: 52px;
      height: 52px;
      background: url("../../../../assets/img/Home/双屏1.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .controlCompara-active {
      background: url("../../../../assets/img/Home/双屏2.png") no-repeat;
      background-size: 100% 100%;
    }
    .controlStatic {
      width: 52px;
      height: 52px;

      background: url("../../../../assets/img/Home/图表打开按钮.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .controlStatic-active {
      background: url("../../../../assets/img/Home/图表打开按钮2.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .searchArea {
    position: absolute;
    top: 96px;
    right: 272px;
    width: 380px;
    height: 60px;
    background: url("../../../../assets/img/Home/搜索背景切图.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    direction: row;
    .inputLable {
      padding-left: 50px;
      background: transparent; //去掉背景
      border: none; //去掉边框
      outline: none;
      width: 280px;
      // 提示文字样式
      font-family: "AlibabaPuHuiTi-2-85-Bold";
      font-size: 18px;
      font-weight: normal;
      font-style: italic;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #999999;
    }
    .searchWord {
      width: 100px;
      line-height: 60px;
      font-family: "AlibabaPuHuiTi-2-85-Bold";
      font-size: 18px;
      font-weight: normal;
      font-style: italic;
      font-stretch: normal;
      color: #fff;
      display: flex;
      direction: row;

      .getButton {
        width: 52px;
        margin-left: 10px;
        cursor: pointer;
      }
      .restButton {
        margin-top: 23px;

        width: 15px;
        height: 15px;
        background: url("../../../../assets/img/Home/关闭.png") no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
  .select-wrapper {
    position: absolute;
    top: 160px;
    right: 100px;
    width: 138px;
    border-radius: 4px;
    border: solid 1px #2766ce;
    background-color: rgba(0, 31, 28, 0.5);
    .select-item {
      height: 35px;
      width: 100%;
      text-align: center;
      border-bottom: solid 1px #2766ce;
      font-family: "AlibabaPuHuiTi-2-55-Bold";
      font-size: 16px;
      font-weight: normal;
      font-style: italic;
      font-stretch: normal;
      line-height: 35px;
      letter-spacing: 0px;
      color: #ffffff;
      cursor: pointer;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background-color: #1a4892;
      }
    }
  }
  .map-legend {
    position: absolute;
    left: 35px;
    bottom: 0;
    width: 136px;
    height: 123px;
    background: url("../../../../assets/img/OneMap/火区图例.png") no-repeat;
    background-size: 100% 100%;
    z-index: 99;
    pointer-events: none;
  }
  .map-compass {
    position: absolute;
    left: 35px;
    top: 110px;
    width: 30px;
    height: 30px;
    background: url("../../../../assets/img/Home/指北针.png") no-repeat;
    background-size: 100% 100%;
    z-index: 99;
    pointer-events: none;
  }
}
// 去除输入框的默认样式
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
</style>
